<template>
  <view class="container">
		 <view class="swiper-box">
		   <u-swiper
				:list="bannerList"
				keyName="advimg"
				height="160"
				@click="handleBanner"
			/>
		 </view>
		 
		 <view v-if="noticeData.show" class="notice-wrap">
		   <u-notice-bar
				:text="noticeData.textList"
				mode="closable"
				direction="column"
				bgColor="#ECF5FF"
				color="#3C9CFF"
				@click="handleNotice"
				@close="noticeData.show = false"
			/>
		 </view>
		 
		 <view v-if="hotCourse.length" class="hot-courses">
			 <view class="index-title flex-space-b">
				 <view class="text">熱門課程</view>
				 <view class="cont flex-align" @click="$navigator('/pages/course/popular')">
					 <text>查看更多</text>
					 <u-icon name="arrow-right" color="#C0C4CC" size="24rpx"></u-icon>
				 </view>
			 </view>
			 <view class="courses-list flex-space-b flex-wrap">
				 <course-column
					v-for="item in hotCourse"
					:key="item.id"
					:item="item"
				 />
			 </view>
		 </view>
		 
		 <view v-if="startCourse.length" class="coming-soon">
			 <view class="index-title flex-space-b">
				 <view class="text">即將開課</view>
				 <view class="cont flex-align" @click="$navigator('/pages/course/comingsoon')">
					 <text>查看更多</text>
					 <u-icon name="arrow-right" color="#C0C4CC" size="24rpx"></u-icon>
				 </view>
			 </view>
			 <view class="courses-list flex-space-b flex-wrap">
					<course-column
						v-for="item in startCourse"
						:key="item.id"
						:item="item"
					/>
			 </view>
		 </view>
		<!-- 自定义tabbar -->
		<tabbar :current="1" />
		<!-- 登录弹窗 -->
		<login-pop />
		<!-- 协议弹窗 -->
		<protocol-pop />
	</view>
</template>

<script>
	import tabbar from '@/components/Tabbar/index'
	import CourseColumn from '@/components/Course/column'
	import CourseRow from '@/components/Course/row'
  import { getAdvlist, getQueryNotice } from '@/api/home'
	import { queryBtCourse } from '@/api/course'
  export default {
		components: {
			tabbar,
			CourseColumn,
			CourseRow
		},
		data() {
			return {
				bannerList: [],
				noticeData: {
					show: true,
				  index: 0,
				  textList: [],
				  list: []
				},
				hotCourse: [],
				startCourse: []
			}
		},
		async onLoad() {
		  this.getBannnerList()
		  this.getNotice()
			this.getCourseList()
		},
		methods: {
			async getBannnerList() {
			  const { data } = await getAdvlist({ Advposition: 1 })
			  this.bannerList = data
			},
			async getNotice() {
			  const { data } = await getQueryNotice()
			  Object.assign(this.noticeData, {
			    textList: data.map(v => v.noticeTitle),
			    list: data
			  })
			  this.noticeList = data
			},
			getCourseList() {
				const params = {
					sort: 'sorder',
					sortType: 'desc',
					pageSize: 4
				}
				queryBtCourse({
					hot: 1,
					...params
				}).then(({ data }) =>{
					this.hotCourse = data.result
				})
				queryBtCourse({
					start: 1,
					...params
				}).then(({ data }) =>{
					this.startCourse = data.result
				})
			},
			handleNotice(index) {
			  // const info = this.noticeData.list[index]
			  this.$navigator(`/pages/message/list`)
			},
			handleBanner(e) {
			  if (this.bannerList[e].advposition === 1) {
			    this.$navigator(`/${this.bannerList[e].advurl}`)
			  } else {
			    this.$navigator(`/${this.bannerList[e].advurl}`, 'switchTab')
			  }
			}
		},
		async onShareTimeline() {
			return {
				title: '柏圖教育',
				path: `/pages/home/index`
			}
		},
		async onShareAppMessage() {
			return {
				title: '柏圖教育',
				path: `/pages/home/index`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #fff;
	}
	.swiper-box {
		padding: 20rpx 20rpx 16rpx;
	}
	.notice-wrap {
		margin-bottom: 20rpx;
	}
	.index-title {
		height: 84rpx;
		.text {
			color: #303133;
			font-size: 34rpx;
			font-weight: 500;
		}
		.cont {
			color: #C0C4CC;
			font-size: 24rpx;
			font-weight: 400;
		}
	}
	.hot-courses {
		padding: 0 20rpx;
	}
	.coming-soon {
		padding: 0 20rpx;
	}
</style>
